<template>
	<view class="warp">
		<view class="tab">
			<view :class="tabnum==0?'tab_item choose' :'tab_item' "  @click="changtab(0)">
				正在进行
			</view>
			<view   :class="tabnum==1?'tab_item choose' :'tab_item' " @click="changtab(1)">
				往期活动
			</view>
		</view>
		<view class="a_list">
			<view @click="toinfo(item)" class="a_item" v-for="(item,index) in projectlist">
				<view class="image">
					<image style="width: 300rpx; height: 200rpx;border-radius: 20rpx;" :src="item.activityCover" mode="widthFix"></image>
				</view>
				<view class="title">
				<view class="name">
						{{item.activityTitle}}
				</view>
				<view class="sten">
					<span></span>
					<span>{{item.activityStartTime}}</span>
					<span>--</span>
					<span>{{item.activityEndTime}}</span>
				</view>
				<view class="crea">
					{{item.createTime}}
				</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	export default {
		data() {
			return {
				tabnum:0,
				queryform:{
					pageSize:20,
					current:1,
					activityState:'2'
					// websiteType:'5',//类型
				},
				projectlist:[],
				total:0,
				type:null,
			};
		},
		computed: {
		  ...mapState(['hasLogin', 'userInfo', 'userCenterData'])
		},
		// 下拉
			onPullDownRefresh() {
				// 刷新位置
			this.getlist()
				var that=this
				setTimeout(function(){
						uni.stopPullDownRefresh()
					},1000)
			},
			onReachBottom(){
				if(this.queryform.pageSize*this.queryform.current>this.total){
					uni.showToast({
						title:"数据加载完毕",
						icon:'none'
					})
				}else{
					this.queryform.current++
					this.$request({
						url:'v3/activity/front/activity/website/list',
						method:'GET',
						data:this.queryform
					}).then(res=>{
						this.projectlist.push(...res.data.list)
						
					})
				}
			},
			onLoad(e) {
				if(e){
					this.type=e.type
				}
				this.getlist()
			},
		methods:{
			getlist(){
					this.queryform.vendorId=uni.getStorageSync('storeId') 
				// if(this.type==1){
				// 					 // 查看自己
				// 					 this.queryform.vendorId=this.userCenterData.vendorId
				// }else{
				// 					 // 查看浏览协会
				// 					this.queryform.vendorId=uni.getStorageSync('storeId') 
				// }
				// this.queryform.vendorId=uni.getStorageSync('storeId')
				this.$request({
					url:'v3/activity/front/activity/website/list',
					method:'GET',
					data:this.queryform
				}).then(res=>{
					this.projectlist=res.data.list
					this.total=res.data.pagination.total
				})
			},
			toinfo(val){
			   uni.navigateTo({
			   	url:"/extra/activityinfo/activityinfo?id="+val.activityId
			   })	
			},
			changtab(val){
				this.tabnum=val
				if(val==0){
					this.queryform.activityState="2"
					this.getlist()
				}else{
					this.queryform.activityState='3'
					this.getlist()
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
page{
				width: 750rpx;
				margin: 0 auto;
				background: #F5F5F5;
				
			}
			.warp{
				.tab{
					margin-top: 10rpx;
					background-color: #fff;
					height: 80rpx;
					line-height: 80rpx;
					padding: 0 20%;
					display: flex;
					justify-content: space-between;
					.choose{
						color: #ff841f;
						font-size: 32rpx;
					}
				}
				.a_list{
					padding: 10rpx;
					.a_item{
						width: 100%;
						// height: 150rpx;
						background-color: #fff;
						margin-top: 20rpx;
						border-radius: 30rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 10rpx;
						position: relative;
						.title{
							width: 400rpx;
							height: 240rpx;
							padding-top: 40rpx;
							.name{
								margin-left: 20rpx;
								font-size: 32rpx;
								color: #ff841f;
							}
							.sten{
								margin-left: 20rpx;
								margin-top: 20rpx;
							}
							
							
						}
						.crea{
							position: absolute;
							bottom: 10rpx;
							right: 5rpx;
							color: #cecece;
						}
					}
				}
				
			}
</style>
